<div class="page">
    <div class="main">
        <div class="step">
            <div class="done done2">
                <img src="../../../../../assets/images/done.png"><span>模板配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>数据集配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型配置</span>
            </div>
            <div class="done done1">
                <img src="../../../../../assets/images/run.png"><span>模型训练</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>应用评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型部署</span>
            </div>
        </div>
        <div class="top_line"><img src="../../../../../assets/images/arrow.jpg" class="top_arrow"></div>
        <div class="context">
            <nz-tabset [nzAnimated]="'false'" style="width: 100%;">
                <nz-tab nzTitle=" 物体检测模型 ">
                    <div class="tabCtx">
                        <div class="tab-title">训练详情</div>
                        <div class="tab-main" *ngIf="step==0">                            
                            <div style="margin-top: 150px;">
                                <div class="tips-err">训练失败<div class="tips-img-err"><img src="../../../../../assets/images/err.png"></div></div>
                                <div class="tips"><span>您的训练数据集有效时长为</span> <span style="color: #f66f6a;">5.56h</span><span>,不足10h。请</span><span style="color: #526ecc;">增加数据量</span><span>后再训练。</span></div>
                                <div><button nz-button nzType="defalut" >修改配置</button></div>   
                            </div>                    
                        </div>
                        <div class="tab-main" *ngIf="step==1">
                            <div class="tips-img"><img src="../../../../../assets/images/epy.png"></div>
                            <div class="tips">暂未开始训练模型</div>
                            <div><button nz-button nzType="defalut" (click)="startTrain()" >开始训练</button></div>                       
                        </div>
                        <div class="tab-main" *ngIf="step==2">
                            <div class="tips-img"><img src="../../../../../assets/images/runing.png"></div>
                            <div class="tips">数据准备中，预计需要2-3分钟...</div>                            
                        </div>
                        <div class="tab-main" *ngIf="step==3">
                            <div class="formInfo">
                                <div class="icon"><img src="../../../../../assets/images/run2.png"></div>
                                <div class="state">训练中...</div>
                                <div class="item-title">训练进度</div>
                                <div class="item-val"><nz-progress [nzPercent]="30" nzStrokeColor="green"></nz-progress></div>
                                <div class="item-title">预计剩余训练时间</div>
                                <div class="item-val">评估中...</div>
                                <div class="item-title">eval_accur</div>
                                <div class="item-val">0</div>
                                <div class="item-title">eval_loss</div>
                                <div class="item-val">0</div>
                            </div>
                            <div class="formInfo" style="margin-bottom: 30px;">
                                <div class="icon"></div>
                                <div class="state"><button nz-button nzType="defalut">取消</button></div>
                                <div class="item-title">目前训练轮次</div>
                                <div class="item-val">3</div>
                                <div class="item-title">剩余训练轮次</div>
                                <div class="item-val">2</div>
                                <div class="item-title">总训练轮次</div>
                                <div class="item-val">5</div>
                                <div class="item-title"></div>
                                <div class="item-val"></div>
                            </div>
                            <div class="statInfo">
                                <div class="leftChart">
                                    <div echarts [options]="lineChart" style="height: 100%;width:100%;"></div>
                                </div>
                                <div class="rightChart">
                                    <div echarts [options]="lineChart" style="height: 100%;width:100%;"></div>
                                </div>                                
                            </div>
                        </div>
                    </div>
                </nz-tab>
                <nz-tab nzTitle=" 文字识别模型 ">
                    <div class="tabCtx">
                        <div class="tab-title">训练详情</div>                        
                        <div class="tab-main">
                            <div class="formInfo">
                                <div class="icon"><img src="../../../../../assets/images/fin.png"></div>
                                <div class="state">训练成功</div>
                                <div class="item-title">训练进度</div>
                                <div class="item-val"><nz-progress [nzPercent]="100" nzStrokeColor="green"></nz-progress></div>
                                <div class="item-title">预计剩余训练时间</div>
                                <div class="item-val">00:00:00</div>
                                <div class="item-title">eval_accur</div>
                                <div class="item-val">0</div>
                                <div class="item-title">eval_loss</div>
                                <div class="item-val">0</div>
                            </div>
                            <div class="formInfo" style="margin-bottom: 30px;">
                                <div class="icon"></div>
                                <div class="state"></div>
                                <div class="item-title">目前训练轮次</div>
                                <div class="item-val">3</div>
                                <div class="item-title">剩余训练轮次</div>
                                <div class="item-val">2</div>
                                <div class="item-title">总训练轮次</div>
                                <div class="item-val">5</div>
                                <div class="item-title"></div>
                                <div class="item-val"></div>
                            </div>
                            <div class="statInfo">
                                <div class="statInfo">
                                    <div class="leftChart">
                                        <div echarts [options]="lineChart" style="height: 100%;width:100%;"></div>
                                    </div>
                                    <div class="rightChart">
                                        <div echarts [options]="lineChart" style="height: 100%;width:100%;"></div>
                                    </div>                                
                                </div>
                            </div>
                        </div>
                    </div>
                </nz-tab>
                <nz-tab nzTitle=" 文字检测模型 " style="width: 100%;height: 100%;">
                    <div class="tabCtx">
                        <div class="tab-title">训练详情</div>                        
                        <div class="tab-main">
                            <div class="formInfo">
                                <div class="icon"><img src="../../../../../assets/images/fin.png"></div>
                                <div class="state">训练成功</div>
                                <div class="item-title">训练进度</div>
                                <div class="item-val"><nz-progress [nzPercent]="100" nzStrokeColor="green"></nz-progress></div>
                                <div class="item-title">预计剩余训练时间</div>
                                <div class="item-val">00:00:00</div>
                                <div class="item-title">eval_accur</div>
                                <div class="item-val">0</div>
                                <div class="item-title"></div>
                                <div class="item-val"></div>
                            </div>
                            <div class="formInfo" style="margin-bottom: 30px;">
                                <div class="icon"></div>
                                <div class="state"></div>
                                <div class="item-title">目前训练轮次</div>
                                <div class="item-val">3</div>
                                <div class="item-title">剩余训练轮次</div>
                                <div class="item-val">2</div>
                                <div class="item-title">总训练轮次</div>
                                <div class="item-val">5</div>
                                <div class="item-title"></div>
                                <div class="item-val"></div>
                            </div>
                            <div class="statInfo">
                                <div class="statInfo">
                                    <div class="leftChart">
                                        <div echarts [options]="lineChart" style="height: 100%;width:100%;"></div>
                                    </div>
                                    <div class="rightChart">
                                        <div echarts [options]="lineChart" style="height: 100%;width:100%;"></div>
                                    </div>                                
                                </div>
                            </div>
                        </div>
                    </div>
                </nz-tab>
            </nz-tabset>
        </div>
    </div>
    <div class="bottom">
        <button nz-button nzType="defalut" class="prebutton" (click)="return()">上一步</button>
        <button nz-button nzType="defalut" class="nextbutton" (click)="nextStep()">下一步</button>
    </div>
</div>